<template>
	<view>
		<custom-header title="售后详情" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap">
				<!-- 加载中 -->
				<view class="loading_wrap" v-if="loading == 'loading'">
					<up-loadmore
						:status="loading"
						iconSize="22"
						iconColor="#FF3316"
						loadingIcon='semicircle'
						loadingText=""
						/>
				</view>
				<view class="_wrap" v-else>
					<view class="content_wrap">
						<view class="orderNum_createTime">
							<view class="orderNum">售后单号：{{ detail.ordeNumber }}</view>
							<view class="createTime">{{ detail.createTime }}</view>
						</view>
						<view class="img_info">
							<view class="img">
								<image :src="detail.imgUrl" mode=""></image>
							</view>
							<view class="info">
								<view class="name_grade_status">
									<view class="name_grade">
										<text class="name">{{ detail.name }}</text>
										<text class="grade"> {{ detail.grade }} </text>
									</view>
									<!-- 售后中 -->
									<view class="status orange" v-if="detail.status == 1">
										<view class="text">售后中</view>
									</view>
									<!-- 售后完成 -->
									<view class="status green" v-if="detail.status == 2">
										<view class="text">
											<text v-if="detail.compensate == 1">平台赔付</text>
											<text v-if="detail.compensate == 2">商家赔付</text>
											<text v-if="detail.compensate == 3">共同赔付</text>
										</view>
										<view class="right_icon">
											<image src="/static/common/right3.png"></image>
										</view>
									</view>
								</view>
								<view class="size">
									规格：{{ detail.size }}
								</view>
								<view class="mature_price">
									<view class="mature">
										成熟度：{{ detail.mature }}
									</view>
									<view class="price">
										￥{{ detail.price }}x1扎
									</view>
								</view>
							</view>
						</view>
						<view class="more_info">
							<view class="mi">
								<view class="label">订单编号</view>
								<view class="value">{{ detail.ordeNumber }}</view>
							</view>
							<view class="mi">
								<view class="label">下单时间</view>
								<view class="value">{{ detail.createTime }}</view>
							</view>
							<view class="mi">
								<view class="label">申请时间</view>
								<view class="value">{{ detail.createTime }}</view>
							</view>
							<view class="mi">
								<view class="label">买家的ID</view>
								<view class="value">199370</view>
							</view>
							<view class="mi">
								<view class="label">交易单价</view>
								<view class="value">￥15.50</view>
							</view>
							<view class="mi">
								<view class="label">问题类型</view>
								<view class="value">质量问题</view>
							</view>
							<view class="mi">
								<view class="label">问题描述</view>
								<view class="value">断头6支</view>
							</view>
						</view>
						<!-- 图片凭证 -->
						<view class="image_wrap">
							<view class="title">图片凭证</view>
							<view class="image_list_wrap">
								<view 
									class="image_list" 
									v-for="(img,index) in detail.imageList" 
									:key="index"
									@click="handlePreviewImage(index)">
										<up-image :show-loading="true" :src="img.url" width="100%" height="100%"></up-image>
								</view>
							</view>
						</view>
						<!-- 售后详情 -->
						<view class="as_detial">
							<view class="title">
								<view class="text">
									售后详情
								</view>
								<view class="status green">
									<text v-if="detail.compensate == 1">平台赔付</text>
									<text v-if="detail.compensate == 2">商家赔付</text>
									<text v-if="detail.compensate == 3">共同赔付</text>
								</view>
							</view>
							<view class="ad">
								<view class="label">平台赔付</view>
								<view class="value bold red">
									5.20元
								</view>
							</view>
							<view class="ad">
								<view class="label">商家赔付</view>
								<view class="value bold red">
									0.00元
								</view>
							</view>
							<view class="ad">
								<view class="label">理赔数量</view>
								<view class="value">
									0扎
								</view>
							</view>
							<view class="ad">
								<view class="label">平台回复</view>
								<view class="value">
									无
								</view>
							</view>
							<view class="ad">
								<view class="label">处理时间</view>
								<view class="value">
									2025-04-05  16:49:53
								</view>
							</view>
						</view>
					</view>
					<!-- 温馨提示 -->
					<view class="hint_wrap">
						<view>温馨提示</view>
						<view>如果您对本次处理不满意，您可以进行投诉反馈，平台核实后将有专人核实处理。</view>
					</view>
					<!-- 按钮 -->
					<view class="btn_wrap">
						<button 
							size="default" 
							type="default" 
							class="btn"
							hover-class="confirm_hover"
							:hover-stay-time="200"
							@click="handleShowFeedback">投诉反馈</button>
					</view>
				</view>
		</scroll-view>
		<!-- 投诉反馈 -->
		<up-popup :show="isShowFeedback" @close="isShowFeedback = false" round="10" closeable>
			<view class="feedback_popup">
				<view class="title">投诉反馈</view>
				<view class="input">
					<up-textarea
						v-model="feedbackReason" 
						placeholder="请输入您的反馈意见"
						border="none"
						style="padding:25rpx;background: #F8F8F8;border-radius: 20rpx;"
						placeholderStyle="font-size:24rpx;color:#AAAAAA">
					</up-textarea>
				</view>
				<view class="hint_wrap">
					<view>温馨提示</view>
					<view>如果您对本次处理不满意，您可以进行投诉反馈，平台核实后将有专人核实处理。</view>
				</view>
				<view class="btn_wrap">
					<button 
						size="default" 
						type="default" 
						class="btn"
						hover-class="confirm_hover"
						:hover-stay-time="200"
						@click="handleConfrmFeedback">确认提交</button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { computed, ref , onMounted} from 'vue';
	import { useStore } from 'vuex';
	const store = useStore();
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight;
	});
	
	const loading = ref('loadmore')
	const detail = ref({})

	// 获取详情数据
	const loadGetDetail = ()=>{
		loading.value = 'loading'
		setTimeout(()=>{
			loading.value = 'loadmore'
			detail.value = {
				id:1,
				ordeNumber:'1564651',
				createTime:'2025-06-17 21:00:15',
				name:'卡罗拉',
				grade:'A级',
				mature:'中熟（3度）',
				size:'20支/扎',
				status:1, // 1售后中
				compensate:1, // 1平台赔付 2商家赔付 3共同赔付
				imgUrl:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg',	
				price:'15.50',
				imageList:[
					{ url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' },
					{ url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' },
					{ url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' },
					{ url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' }
				]
			}
		},1500)
	}
	
	// 预览图片
	const handlePreviewImage = (index)=>{
		uni.previewImage({
			current:index,
			urls:detail.value.imageList.map(item=>item.url)
		})
	}
	// 预览视频
	const handlePreviewVideo = (index)=>{
		// #ifdef MP-WEIXIN
		wx.previewMedia({
			current:index,
			sources:fileList.value
		})
		// #endif
	}
	
	// 投诉反馈
	const isShowFeedback = ref(false)
	const feedbackReason = ref('')
	const handleShowFeedback = ()=>{
		feedbackReason.value = ''
		isShowFeedback.value = true
	}
	const handleConfrmFeedback = ()=>{
		uni.navigateTo({
			url:"/pages/feedbackSuccess/feedbackSuccess"
		})
	}
	onMounted(()=>{
		loadGetDetail()
	})
</script>

<style lang="scss">
	._wrap{
		padding: 20rpx;
		.content_wrap{
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 25rpx 20rpx;
			.orderNum_createTime{
				display: flex;
				font-size: 24rpx;
				color: #999999;
				justify-content: space-between;
				border-bottom: 1rpx solid #E5E5E5;
				padding-bottom: 25rpx;
			}
			.img_info{
				display: flex;
				align-items: center;
				padding-top: 25rpx;
				.img{
					width:143rpx;
					height: 143rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}
				.info{
					padding-left: 20rpx;
					flex: 1;
					.name_grade_status{
						display: flex;
						justify-content: space-between;
						font-weight: bold;
						font-size: 28rpx;
						.name{
							color: #333333;
						}
						.grade{
							color: #FF3316;
						}
						.status{
							display: flex;
							align-items: center;
							.right_icon{
								width: 11rpx;
								height: 20rpx;
								display: flex;
								margin-left: 10rpx;
							}
						}
					}
					.size{
						font-size: 24rpx;
						color: #999;
						padding: 15rpx 0;
					}
					.mature_price{
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						color: #999999;
						.price{
							font-weight: bold;
							color: #333333;
						}
					}
				}
			}
			.more_info,.as_detial{
				margin-top: 25rpx;
				border-top: 1rpx solid #E5E5E5;
				.mi,.ad{
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999999;
					padding-top: 25rpx;
					.value{
						color: #333333;
					}
				}
			}
			.image_wrap,.as_detial{
				margin-top: 25rpx;
				border-top: 1rpx solid #E5E5E5;
				.title{
					font-size: 28rpx;
					color: #333333;
					padding-top: 25rpx;
					display: flex;
					justify-content: space-between;
					.status{
						font-weight: bold;
					}
				}
			}
			.image_list_wrap{
				display: flex;
				flex-wrap: wrap;
				.image_list{
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					overflow: hidden;
					margin-top: 25rpx;
					margin-left: 25rpx;
					&:first-child{
						margin-left: 0;
					}
					&:nth-child(3n+4){
						margin-left: 0;
					}
				}
			}
		}
	}
	.hint_wrap{
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #F5564D;
		text-align: justify;
	}
	.btn_wrap{
		.btn{
			width: 200rpx;
			height: 60rpx;
			border-radius: 184rpx;
			text-align: center;
			background: #F5564D;
			line-height: 60rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
	.feedback_popup{
		padding: 40rpx 25rpx 60rpx;
		.title{
			font-size: 32rpx;
			color: #333;
			text-align: center;
		}
		.input{
			padding: 40rpx 0 10rpx;
		}
		.btn_wrap{
			padding-top: 40rpx;
		}
	}
</style>
